import React, { useState } from 'react';
import { Box, Switch, ThemeColorType } from '@nova-hf/ui';

type ToggleSettingProps = {
  onOff: boolean;
  onToggle: () => void;
  color: ThemeColorType;
};

export const ToggleSetting = ({ onOff, onToggle, color }: ToggleSettingProps) => {
  const [toggleOnOff, setToggleOnOff] = useState<boolean>(onOff);

  return (
    <Box display="flex" width="100%" justifyContent="flex-end">
      <Switch
        isOn={toggleOnOff}
        color={color}
        onToggle={() => {
          setToggleOnOff(!toggleOnOff);
          onToggle();
        }}
      />
    </Box>
  );
};